<template>
  <div class="assignment-details-container">
    <div class="main-content">
      <div class="breadcrumb">
        <router-link to="/assignments">返回</router-link>
        <span> / 作业详情</span>
      </div>
      <div class="assignment-header">
        <h2>作业详情</h2>
      </div>
      <div class="assignment-status">
        <div class="status-bar">
          <div class="status-item" :class="{ active: currentStage >= 1 }">
            <span>提交作业阶段</span>
            <span class="status-text" v-if="currentStage > 1">已截至</span>
            <span class="status-text" v-else>正在进行</span>
          </div>
          <!-- <div class="status-item" :class="{ active: currentStage >= 2 }">
            <span>作业批改阶段</span>
            <span class="status-text" v-if="currentStage > 2">已截至</span>
            <span class="status-text" v-else>正在进行</span>
          </div> -->
          <div class="status-item" :class="{ active: currentStage >= 3 }">
            <span>成绩公布阶段</span>
            <span class="status-text" v-if="currentStage === 3">已截至</span>
            <span class="status-text" v-else>正在进行</span>
          </div>
        </div>
        <div class="progress-bar">
          <div class="progress" :style="{ width: progressWidth + '%' }"></div>
        </div>
      </div>
      <!-- <div class="assignment-score">
        <span>作业得分：<strong>{{ assignment.score }}</strong></span>
      </div> -->
      <div class="assignment-info">
        <h3>作业要求：</h3>
        <p>{{ assignment.requirements }}</p>
      </div>
      <div class="assignment-submission">
        <textarea placeholder="请填写内容" v-model="submissionContent"></textarea>
        <div class="upload-section">
          <input type="file" id="file-upload" class="file-upload-input" @change="handleFileUpload"/>
          <label for="file-upload" class="file-upload-label">上传附件</label>
          <div class="uploaded-files" v-if="file!=null">
            <h4>已上传附件:(只取最后一次上传的附件)</h4>
            <!-- <ul>
              <li v-for="file in uploadedFiles" :key="file.name">{{ file.name }}</li>
            </ul> -->
            <div>{{ file.name }}</div>
          </div>

        <div class="buttons">
          <button @click="submitAssignment" class="submit-button">提交作业</button>
          <!-- <button @click="startPeerReview" class="peer-review-button">开始互评</button> -->
        </div>
        </div>

      </div>
      <!-- <div class="pagination">
        <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
        <span v-for="page in totalPages" :key="page" @click="goToPage(page)" :class="{ active: currentPage === page }">{{ page }}</span>
        <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
      </div> -->
    </div>
    <div class="side-panel">
      <img src="/images/作业测试1.png" alt="作业测试1" class="side-image"/>
      <div class="progress-section">
        <h3>学习进度</h3>
        <div class="progress-bar-fixed">
          <div class="progress" :style="{ width: progressWidth + '%' }"></div>
        </div>
        <span>{{ assignment.progress }}%</span>
      </div>
      <div class="courses">
        <h3>所属课程</h3>
        <!-- <ul>
          <li v-for="course in courses" :key="course.id">{{ course.name }}</li>
        </ul> -->
        <div>{{ assignment.courseName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '../api';

export default {
  name: 'AssignmentDetails',
  data() {
    return {
      currentStage: 2, // 当前阶段
      progressWidth: 50, // 进度条百分比
      score: 111,
      submissionContent: '',
      uploadedFiles: [],
      currentPage: 1,
      totalPages: 7,
      courses: [
        { id: 1, name: '课程 1' }
      ],
      assignment: {},
      file:null,
      userId: localStorage.getItem("userid"),
    };
  },
  created() {
    this.fetchAssignmentDetails();
  },
  methods: {
    fetchAssignmentDetails() {
      const id = this.$route.params.id;
      api.getAssignmentDetails(id,this.userId).then(response => {
        this.assignment = response.data.data;
      }).catch(error => {
        console.error('Failed to fetch assignment details:', error);
      });
    },
    submitAssignment() {
      const formData = new FormData();
      formData.append('file', this.file); // 假设你有一个文件输入元素
      formData.append('assignmentId', this.$route.params.id); // 假设你有一个文件输入元素
      formData.append('content', this.submissionContent); // 假设你有一个文件输入元素
      // const data = {
      //   assignmentId: this.$route.params.id,
      //   content: this.submissionContent,
      //   files: this.uploadedFiles
      // };
      api.submitAssignment(formData).then(() => {
        alert('作业已提交');
      }).catch(error => {
        console.error('Failed to submit assignment:', error);
      });
    },
    handleFileUpload(event) {
      // const files = event.target.files;
      // for (let i = 0; i < files.length; i++) {
      //   this.uploadedFiles.push(files[i]);
      // }
      this.file = event.target.files[0];
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    goToPage(page) {
      this.currentPage = page;
    },
    startPeerReview() {
      this.$router.push({ name: 'PeerReview' });
    }
  }
};
</script>

<style scoped>
.assignment-details-container {
  display: flex;
  padding: 20px;
  background-color: #f9f9f9;
}
.main-content {
  flex: 3;
  margin-right: 20px;
}
.breadcrumb {
  margin-bottom: 20px;
  font-size: 14px;
}
.assignment-header {
  margin-bottom: 20px;
}
.assignment-header h2 {
  margin: 0;
  color: #333;
}
.assignment-status {
  margin-bottom: 20px;
}
.status-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.status-item {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  background-color: #f0f0f0;
  margin-right: 10px;
  color: #999;
  position: relative;
}
.status-item.active {
  background-color: #007bff;
  color: #fff;
}
.status-item:last-child {
  margin-right: 0;
}
.status-text {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 12px;
}
.progress-bar {
  height: 10px;
  background-color: #ddd;
  margin-top: 10px;
  position: relative;
  border-radius: 5px;
}
.progress-bar-fixed {
  width: 100%;
  height: 10px;
  background-color: #ddd;
  position: relative;
  border-radius: 5px;
}
.progress {
  height: 100%;
  background-color: #007bff;
  border-radius: 5px;
}
.assignment-score {
  margin-bottom: 20px;
  font-size: 16px;
  color: #333;
}
.assignment-info {
  margin-bottom: 20px;
}
.assignment-info h3 {
  margin: 0 0 10px 0;
  color: #333;
}
.assignment-info p {
  margin: 5px 0;
  line-height: 1.5;
}
.assignment-submission {
  margin-bottom: 20px;
}
.assignment-submission textarea {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.upload-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.file-upload-label, .submit-button, .peer-review-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
  border: none;
}
.peer-review-button {
  background-color: #28a745;
}
.file-upload-input {
  display: none;
}
.uploaded-files ul {
  list-style: none;
  padding: 0;
}
.uploaded-files li {
  margin-bottom: 5px;
}
.assignment-submission .submit-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
.assignment-submission .submit-button:hover {
  background-color: #0056b3;
}
.buttons {
  display: flex;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.pagination span {
  margin: 0 5px;
  cursor: pointer;
}
.pagination span.active {
  font-weight: bold;
  color: #007bff;
}
.pagination button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
  margin: 0 10px;
}
.pagination button:disabled {
  background-color: #ccc;
}
.side-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.side-image {
  max-width: 100%;
  max-height: 200px;
  border-radius: 5px;
  margin-bottom: 20px;
}
.progress-section {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}
.courses {
  width: 100%;
  text-align: center;
}
.courses ul {
  list-style: none;
  padding: 0;
}
.courses li {
  background-color: #f0f0f0;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}
.courses li:last-child {
  margin-bottom: 0;
}
</style>
